<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
      *{
          margin: 0;
      }
    .el-container{
      height: 100%;
    }
    .el-pagination{
    text-align: right;
    }
    .el-header{
      background-color: #fff;
      box-shadow: 0 5px 10px 5px rgba(199, 199, 199, 0.3);
      /* text-align:right; */
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-height: 92px;
    }
    .el-aside{
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 0 0 1px #D9D9D9;
      z-index: 100;
      height: 100vh;
    }
    .logo{
      font-size: 38px;
      color: #FF6900;
      margin-top: 30px;
    }
    .logo_image{
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin-top: 30px;
    }
    .btn_area{
      margin-top: 10px;
    
    }
    .el-menu{
      width: 100%;
    }
    .logo_top{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 20px;
    }
    .div_left{
      margin-right: 20px;
    }
    /* 页面样式 */
    .ql-editor{
    min-height: 300px;
}
.upload-demo{
    margin-top: 30px;
    margin-left: 40px;
    margin-bottom: 30px;
}
.left_fix{
    margin-left: 40px;
    margin-bottom: 40px;
}
    </style>
</head>
<body>
  <div id="app">
        <el-container class='home_container'>
          <!-- 侧边栏区域 -->
          <el-aside width="200px">
            <div class="logo">LOGO</div>
            <img src="../assets/image/home/logo.png"  class="logo_image"/>
            <div>李明</div>
            <div class='btn_area'>
               <el-button type="warning" icon="el-icon-setting" circle size='mini'></el-button>
              <el-button type="warning" icon="el-icon-delete" circle size='mini'></el-button>
            </div>
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              active-text-color='#fff'
              router>
              <!-- 一级菜单 -->
              <el-submenu index="1">
                <!-- 一级菜单的模板区域 -->
                <template slot="title"><span>个人办公</span></template>
                <el-menu-item index="dailyWork">日常办公</el-menu-item>
                <el-menu-item index="studyReport">学习报告</el-menu-item>
              </el-submenu>
              <el-submenu index="2">
                <!-- 一级菜单的模板区域 -->
                <template slot="title"><span>项目中心</span></template>
                <el-menu-item index="project">项目</el-menu-item>
                <el-menu-item index="statement">统计报表</el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <!-- 一级菜单的模板区域 -->
                <template slot="title"><span>行政管理</span></template>
                <el-menu-item index="department">部门管理</el-menu-item>
                <el-menu-item index="staff">职员管理</el-menu-item>
              </el-submenu>
              <el-submenu index="4">
                <!-- 一级菜单的模板区域 -->
                <template slot="title"><span>服务中心</span></template>
                <el-menu-item index="member">会员客户</el-menu-item>
                <el-menu-item index="news">公告新闻</el-menu-item>
                <el-menu-item index="address">通信录</el-menu-item>
              </el-submenu>
              <el-submenu index="5">
                <!-- 一级菜单的模板区域 -->
                <template slot="title"><span>人事酬薪</span></template>
                <el-menu-item index="myAttendance">我的考勤</el-menu-item>
                <el-menu-item index="attendance">考勤管理</el-menu-item>
                <el-menu-item index="performance">业绩管理</el-menu-item>
                <el-menu-item index="mySalary">我的酬薪</el-menu-item>
                <el-menu-item index="agreement">劳动合同</el-menu-item>
                <el-menu-item index="signAgreement">签约合同</el-menu-item>
              </el-submenu>
              <el-submenu index="6">
                <!-- 一级菜单的模板区域 -->
                <template slot="title"><span>财务中心</span></template>
                <el-menu-item index="reimbursement">费用报销</el-menu-item>
                <el-menu-item index="financialStatement">财务报表</el-menu-item>
              </el-submenu>
              <el-submenu index="7">
                <!-- 一级菜单的模板区域 -->
                <template slot="title"><span>客户中心</span></template>
                <el-menu-item index="customList">客户名单</el-menu-item>
                <el-menu-item index="customerDynamics">客户动态</el-menu-item>
              </el-submenu>
            </el-menu>
            </el-aside>
          <el-container>
            <!-- 头部区域 -->
            <el-header>
              <img src="../assets/logo.png" class='logo_top' alt="">
              <div class="div_left">管理员</div>
              <el-button icon="el-icon-circle-close">退出</el-button>
            </el-header>
            <!-- 页面主体区域 -->
            <el-main>
                    <el-card>
                            <el-row :gutter='5'>
                                <el-col :span='2'>
                                    <el-select v-model="value" placeholder="职位">
                                        <el-option
                                            v-for="item in options1"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span='2'>
                                    <el-input v-model="input3" placeholder="职员"></el-input>
                                </el-col>
                                <el-col :span='2'>
                                    <el-select v-model="value1" placeholder="类型">
                                        <el-option
                                            v-for="item in options2"
                                            :key="item.value2"
                                            :label="item.label"
                                            :value="item.value2">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span='3.5'>
                                    <el-date-picker
                                        v-model="input1"
                                        type="date"
                                        placeholder="开始日期">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span='3.5'>
                                    <el-date-picker
                                        v-model="input2"
                                        type="date"
                                        placeholder="结束日期">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span='2.5'><el-button type='warning'>立即查询</el-button></el-col>
                                <el-col :span='1.5'><el-button type='primary'>重置查询</el-button></el-col>
                            </el-row>
                            <el-table
                                :data="tableData"
                                stripe
                                style="width: 100%"
                                border>
                                <el-table-column
                                type='index'
                                label="NO"
                                width="60">
                                </el-table-column>
                                <el-table-column
                                prop="workman"
                                label="职员">
                                </el-table-column>
                                <el-table-column
                                prop="position"
                                label="职位">
                                </el-table-column>
                                <el-table-column
                                prop="kinds"
                                label="类型"
                                >
                                </el-table-column>
                                <el-table-column
                                prop="money"
                                label="金额">
                                </el-table-column>
                                <el-table-column
                                prop="performanceRate"
                                label="业绩换算率">
                                </el-table-column>
                                <el-table-column
                                prop="performanceNum"
                                label="业绩额">
                                </el-table-column>
                                <el-table-column
                                prop="royaltyRate"
                                label="提成率">
                                </el-table-column>
                                <el-table-column
                                prop="royaltyMonty"
                                label="提成金额">
                                </el-table-column>
                                <el-table-column
                                prop="mount"
                                label="月份">
                                </el-table-column>
                            </el-table>
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="1000">
                            </el-pagination>
                        </el-card>
            </el-main>
            </el-container>
            </el-container>
    </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data () {
        return {
      options1: [{
        value: '选项1',
        label: '黄金糕1'
      }, {
        value: '选项2',
        label: '双皮奶1'
      }, {
        value: '选项3',
        label: '蚵仔煎1'
      }, {
        value: '选项4',
        label: '龙须面1'
      }, {
        value: '选项5',
        label: '北京烤鸭1'
      }],
      options2: [{
        value2: '选项12',
        label: '黄金糕'
      }, {
        value2: '选项22',
        label: '双皮奶'
      }, {
        value2: '选项32',
        label: '蚵仔煎'
      }, {
        value2: '选项42',
        label: '龙须面'
      }, {
        value2: '选项52',
        label: '北京烤鸭'
      }],
      value: '',
      value1: '',
      input: '',
      input1: '',
      input2: '',
      input3: '',
      //   下方表格的数据没有后台只能自己写了
      tableData: [
        {
          workman: '姬无心',
          position: '人事教育部',
          kinds: '预收',
          money: '1,000.00',
          performanceRate: '50.00%',
          performanceNum: '500.00',
          royaltyRate: '5.00%',
          royaltyMonty: '50.00',
          mount: '2019-03'
        },
        {
          workman: '姬无心',
          position: '人事教育部',
          kinds: '预收',
          money: '1,000.00',
          performanceRate: '50.00%',
          performanceNum: '500.00',
          royaltyRate: '5.00%',
          royaltyMonty: '50.00',
          mount: '2019-03'
        },
        {
          workman: '姬无心',
          position: '人事教育部',
          kinds: '预收',
          money: '1,000.00',
          performanceRate: '50.00%',
          performanceNum: '500.00',
          royaltyRate: '5.00%',
          royaltyMonty: '50.00',
          mount: '2019-03'
        },
        {
          workman: '姬无心',
          position: '人事教育部',
          kinds: '预收',
          money: '1,000.00',
          performanceRate: '50.00%',
          performanceNum: '500.00',
          royaltyRate: '5.00%',
          royaltyMonty: '50.00',
          mount: '2019-03'
        },
        {
          workman: '姬无心',
          position: '人事教育部',
          kinds: '预收',
          money: '1,000.00',
          performanceRate: '50.00%',
          performanceNum: '500.00',
          royaltyRate: '5.00%',
          royaltyMonty: '50.00',
          mount: '2019-03'
        },
        {
          workman: '姬无心',
          position: '人事教育部',
          kinds: '预收',
          money: '1,000.00',
          performanceRate: '50.00%',
          performanceNum: '500.00',
          royaltyRate: '5.00%',
          royaltyMonty: '50.00',
          mount: '2019-03'
        }

      ]
    }
},
 
  created () {

  },
  methods: {
    isShow (number) {
      this.showActive = number
      console.log(this.showActive)
    },
    newAttend () {
      this.$router.push('/newAttend')
    }
}
})
  </script>
</html>